<template>
	<view class="container">
		<view class="tabs flex_box">
		  <view 
		    class="tab_item flex1" 
				:class="params.type==item.id?'cur':''"
		    @tap='tabChange(item.id)'
				:key='index'
		    v-for='(item,index) in tablist'><text>{{item.name}}</text></view>
		</view>
		<view class="list" v-for='item in customerList' :key='item.id'>
			<view class="list_item flex_box">
			  <image :src="item.customerInfo.headPic || defaultImg" class="avatar" mode="aspectFill"></image>
			  <view class="flex1 right_box">
			    <view class="flex_box customer_info">
						<view class="customer_label">客户姓名</view>
						<view class="flex1 flex_between">
							<view class="flex1 customer_con">{{item.customerInfo.customerName}}</view>
							<image src="../../static/images/edit.png" class="edit" @tap="editOne(item)" v-if="!item.edit"></image>
							<image src="../../static/images/save.png" class="edit" @tap="saveOne(item)" v-else></image>
						</view>
					</view>
					<view class="flex_box customer_info">
						<view class="customer_label">联系方式</view>
						<view class="customer_con">{{item.customerInfo.customerPhone}}</view>
					</view>
					<view class="flex_box customer_info">
						<view class="customer_label">联系地址</view>
						<view class="customer_con">{{item.customerInfo.customerAddr}}</view>
					</view>
			  </view>
			</view>
			<view class="flex_box customer_info1">
				<view class="customer_label">课程进度</view>
				<view class="customer_con">余{{item.lastClassCount}}课时/共{{item.totalClassCount}}课时</view>
			</view>
			<view class="flex_box customer_info1">
				<view class="customer_label">单次课时</view>
				<view class="customer_con">
					<text v-if="!item.edit">{{item.oneUseCount|| 0}}课时</text>
					<input v-else type="text" class="ipt" v-model="item.oneUseCount">
				</view>
			</view>
			<view class="flex_box customer_info1">
				<view class="customer_label">上课时间</view>
				<view class="customer_con">
					<text v-if="!item.edit">{{item.teachRemark}}</text>
					<input v-else type="text" class="ipt" v-model="item.teachRemark">
				</view>
			</view>
		</view>
		<empty-page v-if="customerList.length==0&&listStatus"></empty-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{name:'课次不足',id:1},
					{name:'正常学员',id:2},
				],
				customerList:[],
				defaultImg:require('@/static/images/img2.png'),
				params:{
					"teacherNo": "",
					"type": 1
				},
				listStatus:true
			}
		},
		onShow() {
			// let info = {
			// 	teacherAppId: "wx08c19827d10b78fe",
			// 	teacherNo: "T2021090500006",
			// 	teacherOpenId: "oUEQCw93yZ5Zp4h4mZvGho22_UEU",
			// 	teacherUnionId: "",
			// }
			// let info = uni.getStorageSync('teacher_userinfo')
			if (!info) {
				uni.navigateTo({
					url:'/pages/login/login?type=myclass'
				})
				return
			}
			this.params.teacherNo = info.teacherNo
			this.queryCustomerTeacherInfoListByType()
		},
		methods: {
			tabChange(type) {
				this.listStatus = false
				this.params.type = type
				this.queryCustomerTeacherInfoListByType()
			},
			queryCustomerTeacherInfoListByType() {
				this.$api.queryCustomerTeacherInfoListByType(this.params).then(res=>{
					if (res.code == 1) {
						this.customerList = res.data
						this.listStatus = true
					}
				})
			},
			editOne(item) {
				this.$set(item,'edit',true)
			},
			saveOne(item) {
				let params = {
					"customerCode": item.customerCode,
					"oneUseCount": item.oneUseCount,
					"teachRemark": item.teachRemark,
					"teacherNo": this.params.teacherNo
				}
				this.$api.updateCustomerTeacherInfo(params).then(res=>{
					if (res.code == 1) {
						this.queryCustomerTeacherInfoListByType()
					} else {
						toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
		min-height: 100vh;
	  font-size: 26rpx;
	  color:#333;
		background-color: #fafafa;
		box-sizing: border-box;
	}
	.tabs{
		border-bottom: 2rpx solid #F0F0F0;
		background-color: #fff;
	}
	.tab_item{
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		color: #333333;
		font-size: 34rpx;
		font-size: 28rpx;
	}
	.tab_item text{
		display: inline-block;
		line-height: 70rpx;
		border-bottom: 4rpx solid transparent;
		box-sizing: border-box;
		font-weight: bold;
	}
	.tab_item.cur text{
	  color: #34BE97;
		border-color: #34BE97;
	}
	.list{
		padding:20rpx 30rpx;
		background-color: #fff;
	}
	.list_item{
		padding:0 0 20rpx 0;
	}
	.customer_info1{
		line-height: 38rpx;
		margin-top: 20rpx;
	}
	.edit{
		width: 24rpx;
		height: 26rpx;
	}
	.ipt{
		height: 50rpx;
		border:2rpx solid #eee;
		box-sizing: border-box;
		padding:0 10rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
</style>
